<template>
	<view class="bg-light">
		<tabsTop tabName="订单详情"></tabsTop>
		<view class="t_status pb-3 pt-2">
			<!-- 状态头部 -->
			<view class="bg-white flex p-2">
				<view>
					<image :src="getIconPath(order.Row_Status)" style="width: 40px;height: 40px;"></image>
				</view>
				<view class="ml-2">
					<view style="font-size: 14px;">{{getRowStatus(order.Row_Status)}}</view>
					<view v-if="order.Row_Status=='1'" style="font-size: 12px;">{{order.Refund_Date}}</view>
					<view v-else-if="order.Row_Status=='0'" class="flex" style="font-size: 10px;">你已发起退款申请，商家将在<view>7天
						</view>内退款</view>
					<view v-else style="font-size: 10px;">商家拒绝退款</view>
				</view>
			</view>
			<!-- 进度/说明 -->
			<view>
				<!-- 退款成功 -->
				<view class="bg-white" v-if="order.Row_Status=='1'">
					<!-- 退款金额 -->
					<view class="flex justify-between align-center p-2" style="font-size: 12px;">
						<view>退款金额：</view>
						<view>￥{{order.Refund_Amount}}</view>
					</view>
					<view>
						<uni-steps :options="list1" :active="calculateActive(order.Row_Status)" />
						<view class="flex justify-between align-center">
							<view>{{order.Submit_Date}}</view>
							<view>{{order.Refund_Date}}</view>
						</view>
					</view>
				</view>
				<!-- 退款进行中 -->
				<view v-else class="container bg-white" style="border-top: 1px solid #f5f6f8;">
					<view class="panel" v-for="(item, index) in panels" :key="index">
						<view class="panel-content" v-show="item.expanded">
							<text v-for="(textItem, textIndex) in item.content" :key="textIndex">{{ textItem }}</text>
						</view>
						<view class="panel-header" @click="togglePanel(index)">
							<!-- {{ item.title }} -->
							<text style="font-size: 13px;" v-if="!item.expanded">更多说明</text>
							<text style="font-size: 13px;" v-if="item.expanded">收起</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 退款信息 -->
			<view class="bg-white">
				<view>退款信息</view>
				<view>
					<!-- 商品信息 -->
					<view>
						<image :src="Domain_IMG+order.Picture_URL" style="width: 104rpx;height: 102rpx;"></image>
						<view>{{order.Article_Name}}</view>
					</view>
					<!-- 退款金额/方式/原因 -->
					<view>
						<view>退款金额：￥{{order.Refund_Amount}}(含运费￥0.00)</view>
						<view>售后方式：仅退款</view>
						<view>退款原因：{{order.Refund_Cause}}</view>
					</view>
					<!-- 编号/申请时间 -->
					<view>
						<view>售后编号：{{order.Refund_SerialNumber}}</view>
						<view>申请时间：{{order.Refund_SerialNumber}}</view>
						<view>数量：{{order.Quantity}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {getRefundDetails} from "@/api/orders.js"
	export default {
		components: {
			tabsTop, //顶部标题组件
		},
		data() {
			return {
				order: {},
				list1: [{
					title: '商家同意退款'
				}, {
					title: '退款到账'
				}],
				panels: [{
					// title: '更多说明', // 添加面板标题
					content: [
						'如果商家同意，申请将达成并退款给你',
						'如果商家拒绝，你可以修改退款申请或申请客服介入',
						'如果特殊情况下退款申请失败，请联系商家处理'
					],
					expanded: false
				}],
				Domain_IMG1: "/static/icon",
				Domain_IMG: app.globalData.Domain_IMG,
				Domain_ICON: app.globalData.Domain_ICON,
			}
		},
		onLoad(options) {
			const Sales_Order_SerialNumber = options.Sales_Order_SerialNumber;
			console.log('Received Sales_Order_SerialNumber:', Sales_Order_SerialNumber);
			this.getData(Sales_Order_SerialNumber);
		},
		methods: {
			togglePanel(index) {
				this.panels[index].expanded = !this.panels[index].expanded;
			},
			getRowStatus(status) {
				switch (status) {
					case '0':
						return "退款申请待商家处理";
					case '1':
						return "退款成功";
					case '3':
						return "商家拒绝退款";
					default:
						return "";
				}
			},
			getIconPath(status) {
				switch (status) {
					case '0':
						return this.Domain_IMG1 + '/pendingPay.png';
					case '1':
						return this.Domain_IMG1 + '/paid.png';
					case '3':
						return this.Domain_ICON + '/transaction_close.png';
					default:
						return "";
				}
			},
			calculateActive(status) {
				if (status === 0) {
					return 1;
				} else if (status === 1) {
					return 2;
				} else {
					return 0; // default active value
				}
			},
			async getData(data) {
				console.log('data', data);
				const res = await getRefundDetails({
					Sales_Order_SerialNumber: data,
					Open_ID: app.globalData.Open_ID
				})
				if (res.Status == "success") {
					this.order = res.Data
				}
				console.log('6',res);
			},
		}
	}
</script>

<style>
	.panel {
		margin-bottom: 10px;
	}

	.panel-header {
		padding: 10px;
		cursor: pointer;
		text-align: center;
		font-size: 13px;
	}

	.panel-content {
		padding: 10px;
	}
</style>